<template>
  <a-card :title="name" hoverable class="scale">
    <template #extra>
      <a-tag color="#f50" v-if="type === Type.Warning">优先数据</a-tag>
      <a-tag color="#404040" v-else-if="type === Type.Ordinary">普通数据</a-tag>
      <a-tag color="#f52e38" v-else-if="type === Type.Dangerous"
        >危险数据</a-tag
      >
      <a-tag color="#8866da" v-else-if="type === Type.Other">其它数据</a-tag>
    </template>
    <div class="grid gap-y-2">
      <div class="flex items-end justify-between">
        <div>
          <a-tag class="code">{{ code }}</a-tag>
        </div>
        <div class="flex flex-col items-end status">
          <a-tag color="green" v-if="status === Status.Dealt">已解决</a-tag>
          <a-tag color="red" v-else-if="status === Status.Critical">危急</a-tag>
        </div>
      </div>
      <p>部门：{{ department }}</p>
      <p>品牌：{{ brand }}</p>
      <p>注册时间：{{ registrationTime }}</p>
    </div>
  </a-card>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, reactive } from "vue";
import { DeviceDataType, DeviceDataStatus } from "@/@types/device/enum";
import moment from "moment";
import { DeviceData } from "device";

export default defineComponent({
  name: "DeviceDataCard",
  props: {
    data: {
      type: Object as PropType<DeviceData>,
      required: true,
    },
  },
  setup(props) {
    const data = reactive(props.data);
    const id = computed(() => data.id);
    const type = computed(() => data.type);
    const name = computed(() => data.name);
    const code = computed(() => data.code);
    const department = computed(() => data.department);
    const Type = {
      Warning: DeviceDataType.WARNING,
      Ordinary: DeviceDataType.ORDINARY,
      Dangerous: DeviceDataType.DANGEROUS,
      Other: DeviceDataType.OTHER,
    };
    const Status = {
      Normal: DeviceDataStatus.NORMAL,
      Dealt: DeviceDataStatus.DEALT,
      Critical: DeviceDataStatus.CRITICAL,
    };
    const status = computed(() => data.status);
    const brand = computed(() => data.label);
    const registrationTime = computed(() => {
      if (data.registrationTime) {
        return moment(data.registrationTime).format("YYYY-MM-DD");
      } else {
        return "无";
      }
    });
    return {
      type,
      code,
      department,
      id,
      status,
      name,
      brand,
      registrationTime,
      Status,
      Type,
    };
  },
});
</script>

<style scoped lang="scss"></style>
